<template>
	<view>
		<u-navbar :title="data.title" placeholder :titleWidth="'80%'" :titleStyle="{fontSize: '14px', color: '#ffffff'}"
			:bgColor="'#E52727'" :leftIconColor="'#ffffff'">
			<view class="u-nav-slot" slot="left">
				<u-icon v-if="userInfo.is_sale" name="arrow-left" :color="'#ffffff'" size="16px" @click="leftClick" />
				<u-icon v-if="!userInfo.is_sale" name="home-fill" :color="'#ffffff'" size="16px" @click="goHome" />
			</view>
			<view v-if="data.is_expires && !userInfo.is_sale" class="u-nav-slot" slot="right">
				<view class="Grid Grid--justifyCenter Grid--center" style="flex-direction: column;" @click="goFeedback">
					<view style="color: #ffffff; font-size: 12px;">投诉</view>
				</view>
			</view>
		</u-navbar>

		<view class="details" :style="!data.content?'padding-bottom: 92px;':''">
			<view class="bg-white overflow-hidden relative" style="padding: 10px 15px;">
				<view
					style="color: #222222; font-weight: bold;word-break: break-all; padding-top: 8px; padding-bottom: 5px;">
					<u-tag v-if="data.category_ids[0]==3" class="tag" text="足球" plain plainFill mode="dark" size="mini" color="#52B36D" border-color="#EDF8F1" style="font-weight: normal;" />
					<u-tag v-if="data.category_ids[0]==4" class="tag" text="篮球" plain plainFill mode="dark" size="mini" color="#3EA5E9" border-color="#EDF8F1" style="font-weight: normal;" />
					{{data.title}}
				</view>
				<image v-if="!data.draft_status&&data.is_expires" class="item-img" src="@/static/images/my/expired.png"
					mode=""></image>
				<view v-if="data.market_ids && data.market_ids.length && !userInfo.is_sale"
					class="Grid Grid--center text-xs">
					<!-- 若当前用户具备新人首免资格且当前方案启用新人首免，那么仅展示新人首免最优权益 -->
					<view style="padding-bottom: 5px;"
						v-for="(i, index) in data.market_ids.filter(i => data.market_ids.includes(4) && !userInfo.orders ? i == 4 : (i != 5 && i != 1 && i != 4 && i != 6))"
						:key="index">
						<u-tag :text="setting.market[i].title" :icon="marketIconMap[i]" type="error" plain plainFill
							size="mini" style="display: inline-block; margin-right: 4px;"></u-tag>
					</view>
				</view>
				<view v-if="data.market_ids && data.market_ids.length && userInfo.is_sale"
					class="Grid Grid--center text-xs">
					<view style="padding-bottom: 5px;"
						v-for="(i, index) in data.market_ids.filter(i => (i != 5 && i != 1 && i != 6))" :key="index">
						<u-tag :text="setting.market[i].title" :icon="marketIconMap[i]" type="error" plain plainFill
							size="mini" style="display: inline-block; margin-right: 4px;"></u-tag>
					</view>
				</view>
				<view class="Grid" style="padding: 12px 0;">
					<view v-if="!data.draft_status" class="Grid-cell text-xs" style="color: #999999; padding: 0 3px;">
						发布时间
						{{data.release_time?data.release_time.substring(0,10):''}}&nbsp;&nbsp;·&nbsp;&nbsp;{{data.hits_show}}&nbsp;浏览量&nbsp;&nbsp;
						<!-- ·&nbsp;&nbsp;{{data.buy_show}}&nbsp;已购买数 -->
					</view>
				</view>
				<view class="Media Media--justifyCenter Media--alignCenter">
					<u--image v-if="data.author" shape="circle" :showLoading="true" :src="data.author.avatar_url"
						width="50px" height="50px" @click="goHome"></u--image>
					<view class="Media-body" style="padding-left: 12px;">
						<view class="Grid Grid--center text-base" style="font-weight: bold; color: #000000;"
							@click="goHome">
							<view class="Grid-cell">{{data&&data.author&&data.author.nickname}}</view>
							<u-button v-if="data.author.status == 3 || data.author.status == 4"
								shape="circle" @click.native.stop="handleSetFocus()"
								style="width: 60px; font-size: 12px; height: 24px; margin: 5px;">关注</u-button>
						</view>
					</view>
				</view>
				<view v-if="!userInfo.is_sale && !data.is_subscribe" class="Media Media--justifyCenter Media--alignCenter" style="background: #FFF1F1; padding: 10px; border-radius: 10px; margin-top: 10px;">
					<view class="Media-body Grid Grid--center" style="padding-left: 12px;">
						<view class="Grid-cell">
							<view class="text-sm">{{data.wechat_title}}公众号</view>
							<view class="text-xs" style="color: #999999;">专业的角度，具体的分析</view>
						</view>
						<view>
							<view @click.native.stop="handleGetApiCode()" style="width: 60px; text-align: center; font-size: 12px; height: 24px; line-height: 24px; border-radius: 4px; background: #FFF1F1; color: #E52727; border: 1px solid #E52727; margin-right: 10px;">关注</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="data.draft_status != 4" class="bg-white" style="padding: 5px 15px;">
				<view
					style="margin-bottom: 10px; background-color: #E52727; padding: 10px 5px; color: #ffffff; border-radius: 10px;">
					<view v-if="data.matchInfo" class="Grid Grid--justifySpaceBetween relative text-sm"
						style="margin-bottom: 2px;">
						<view class="Grid-cell text-center">{{isObjData&&data.matchInfo.competition_info.name}}
							{{isObjData&&data.matchInfo.match_time.substring(5,16)}}
						</view>
					</view>
					<view v-else class="Grid Grid--justifySpaceBetween relative text-xs" style="margin-bottom: 2px;">
						<view class="Grid-cell text-center">{{data.match_date}}</view>
					</view>
					<view v-if="data.matchInfo" class="Grid Grid--1of2 Grid--center"
						style="position: relative; padding: 10px 20px;">
						<view class="Grid Grid--center Grid--justifyCenter Grid-cell"
							style="background-color: #ffffff; border-radius: 20px; padding: 5px 0;">
							<image :src="isObjData&&data.matchInfo.home_team_info.logo"
								style="width: 15px; height: 15px;"></image>
							<view
								style="padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; color: #222222; font-size: 12px;">
								{{isObjData&&data.matchInfo.home_team_info.team_name}}
							</view>
						</view>
						<view class="Grid Grid--center Grid--justifyCenter Grid-cell"
							style="background-color: #ffffff; border-radius: 20px;  padding: 5px 0;">
							<image :src="isObjData&&data.matchInfo.away_team_info.logo"
								style="width: 15px; height: 15px;"></image>
							<view
								style="padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; color: #222222;  font-size: 12px;">
								{{isObjData&&data.matchInfo.away_team_info.team_name}}
							</view>
						</view>
						<view
							style="position: absolute; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; text-align: center; color: #ffffff; background-color: #52B36D; font-size: 12px; left: 50%; margin-left: -9px; bottom: 13px;">
							<view style="scale: .8;">VS</view>
						</view>
					</view>
					<view v-else class="Grid Grid--justifyCenter text-sm Grid--center" style="padding: 0 20px;">
						{{data.match_nick}}
					</view>
				</view>
				<radar-chart v-if="data.market_ids && data.market_ids.includes(6) && data.category_ids[0] == 3" :data="data"></radar-chart>
			</view>

			<view v-if="data.draft_status != 4"
				style="padding: 0 15px; background-color: #ffffff; padding-bottom: 10px;">
				<view style="background-color: #FFEDED; border-radius: 10px;">
					<view v-if="data.description" class="text-base"
						style="padding: 15px; font-weight: 400; line-height: 24px;">
						<view style="color: #222222; font-size: 18px; text-align: center; margin-bottom: 10px;">简介
						</view>
						<mp-html container-style="padding: 0;" :content="data.description" lazy-load scroll-table
							selectable use-anchor />
						<view v-if="data.img_url" class="Grid Grid--center" style="padding-top: 10px;">
							<view v-for="(item, index) in data.img_url.split(',')" :key="index"
								style="position: relative; width: 80px; height: 80px; background-color: #f4f5f7; border-radius: 2px; margin: 0 8px 8px 0;">
								<u--image :showLoading="true" :src="item" width="80px" height="80px" mode="aspectFit"
									@click="previewImage(index, 'img_url')"></u--image>
							</view>
						</view>

					</view>
					<view v-if="data.content" class="text-base"
						style="padding: 15px; font-weight: 400; line-height: 24px;">
						<view style="color: #222222; font-size: 18px; text-align: center; margin-bottom: 10px;">付费内容
						</view>
						<mp-html container-style="padding: 0;" :content="data.content" lazy-load scroll-table selectable
							use-anchor />
						<view v-if="data.img_main" class="Grid Grid--center" style="padding-top: 10px;">
							<view v-for="(item, index) in data.img_main.split(',')" :key="index"
								style="position: relative; width: 80px; height: 80px; background-color: #f4f5f7; border-radius: 2px; margin: 0 8px 8px 0;">
								<u--image :showLoading="true" :src="item" width="80px" height="80px" mode="aspectFit"
									@click="previewImage(index, 'img_main')"></u--image>
							</view>
						</view>
					</view>
					<view v-if="!data.content" class="Grid Grid--center text-center blur-element relative pay-bj"
						style="height: 140px;">
						<view style="width: 100%;">
							<view class="Grid Grid--justifyCenter">
								<u-icon name="lock-fill" color="#E52727" size="28"></u-icon>
							</view>
							<view class="Grid Grid--justifyCenter" style="color: #E52727;">
								付费即刻解锁方案详情
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="text-xs Grid Grid--center Grid--justifyCenter"
				style="padding: 8px 16px 25px; color: #888888; line-height: 20px; background-color: #ffffff;">
				<view>本平台适用于内容聚合与发布，所阅览内容仅代表发布者的观点</view>
				<view style="width: 100%; text-align: center;">理性消费，切勿盲从</view>
			</view>

		</view>
		
		<u-overlay :show="code ? true : false" @click="code = ''">
			<view class="Grid Grid--center Grid--justifyCenter">
				<image style="width: 200px; height: 200px; margin-top: 20%;" mode="widthFix" :src="code"></image>
			</view>
			<view class="Grid text-base text-center text-white Grid--center Grid--justifyCenter"
				style="padding: 10px 0;">长按识别关注公众号</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex";
	import {
		parseQuery
	} from '@/utils/index.js'
	import radarChart from './radar-chart.vue'
	import {
		setFocus,
		getApiCode
	} from '@/service/index'
	import {
		BASEURL
	} from '@/constant/index.js'

	export default {
		name: "details-article",
		props: {
			data: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				marketIconMap: {
					1: 'gift', // 留资优惠
					2: 'red-packet', // 不中包退
					3: 'coupon', // 买一送一
					4: 'gift', // 新人首免
					5: 'clock', // 定时秒杀
				},
				code: ''
			}
		},
		components: {
			radarChart
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				setting: state => state.login.setting
			}),
			isObjData() {
				return this.data.matchInfo && this.data.matchInfo.competition_info
			}
		},
		methods: {
			goHome() {
				const {
					appid
				} = parseQuery()

				let http = `${window.location.origin}/user/#/?appid=${appid}&other=${new Date().getTime()}`
				window.location.href = http
			},
			// 预览方案简介图片
			previewImage(index, type) {
				uni.previewImage({
					current: index,
					urls: this.data[type].split(','),
				});
			},
			goFeedback() {
				uni.navigateTo({
					url: `/pages/user/feedback/feedback?appid=${this.userInfo.appid}&id=${this.data.content_id}&title=${this.data.title}`
				})
			},
			leftClick() {
				uni.navigateBack({});
			},
			async handleSetFocus(status) {
				const result = await setFocus({
					user_id: this.data.author.user_id,
					is_push: 1,
					status: 1
				})
				this.getWzDetails()
				setTimeout(() => {
					uni.showToast({
						title: '关注成功,新方案将即时推送~',
						icon: 'none'
					})
				}, 500)
			},
			handleGetApiCode() {
				let params = {
					content_id: this.data.content_id,
					wechat_id: this.data.wechat_id
				}
				getApiCode(params).then(res => {
					if (res.code == 200) {
						this.code = BASEURL + '/' + res.data.qrcode_url
						console.log(this.code)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		background: #F3F3F3;
	}

	.item-img {
		width: 60px;
		height: 60px;
		position: absolute;
		right: -6px;
		top: -6px;
		transform: rotate(22deg);
	}

	.tag {
		width: 34px;
		font-size: 11px;
		display: inline-block;
		margin-right: 6px;

		::v-deep .u-tag--mini {
			padding: 0;
			justify-content: center;
		}
	}

	.pay-bj {
		background: url('@/static/images/my/payBj.png') no-repeat;
		font-weight: 400;
		font-size: 16px;
		color: rgba(0, 0, 0, .9);
		line-height: 26px;
		text-align: left;
		font-style: normal;
		position: relative;
		min-height: 120px;
		background-size: 100% 100%;
		background-position: 60%;
		width: 90%;
		margin: 0 auto;
	}
</style>